<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
    <script src="lib/cuon-matrix.js"></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script >

let VSHADER_SOURCE =`
  attribute vec4 a_position;
  attribute vec4 a_color;
  uniform mat4 u_viewMatrix;
  uniform mat4 u_projMatrix;
  varying vec4 v_color;
  void main() {
    gl_Position = u_projMatrix * u_viewMatrix * a_position;;
    v_color = a_color;
  }`

// Fragment shader program
let FSHADER_SOURCE =`
  #ifdef GL_ES
  precision mediump float;
  #endif
  varying vec4 v_color;
  void main() {
  gl_FragColor=v_color;
  }`
  

function main() {
  let canvas = document.getElementById('mybox');

  let gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  let n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the vertex information');
    return;
  }
  gl.clearColor(0,0,0,1);
  let u_viewMatrix=gl.getUniformLocation(gl.program,'u_viewMatrix')
  let u_projMatrix=gl.getUniformLocation(gl.program,'u_projMatrix')
  if (!u_viewMatrix || !u_projMatrix) { 
    console.log('Failed to get the storage location of u_ViewMatrix and/or u_ProjMatrix');
    return;
  }
  let viewMatrix=new Matrix4()
  let projMatrix=new Matrix4()

//顶点着色器输出的顶点都必须在规范立方体中
  viewMatrix.setLookAt(0,0,5,0,0,-100,0,1,0);
  projMatrix.setPerspective(60,canvas.width/canvas.height,0.1,200)
  gl.uniformMatrix4fv(u_viewMatrix,false,viewMatrix.elements);
  gl.uniformMatrix4fv(u_projMatrix,false,projMatrix.elements);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES,0,n)

}

function initVertexBuffers(gl) {
  let verticesColor = new Float32Array([
  0.75,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
    0.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
    1.25, -1.0,  -4.0,  1.0,  0.4,  0.4, 

    0.75,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
    0.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
    1.25, -1.0,  -2.0,  1.0,  0.4,  0.4, 

    0.75,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
    0.25, -1.0,   0.0,  0.4,  0.4,  1.0,
    1.25, -1.0,   0.0,  1.0,  0.4,  0.4, 

    // Three triangles on the left side
   -0.75,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
   -1.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
   -0.25, -1.0,  -4.0,  1.0,  0.4,  0.4, 

   -0.75,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
   -1.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
   -0.25, -1.0,  -2.0,  1.0,  0.4,  0.4, 

   -0.75,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
   -1.25, -1.0,   0.0,  0.4,  0.4,  1.0,
   -0.25, -1.0,   0.0,  1.0,  0.4,  0.4, 
  ]);
  let n = 18; 

  let vertexColorBuffer = gl.createBuffer();
  if (!vertexColorBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verticesColor, gl.STATIC_DRAW);

  let FSIZE = verticesColor.BYTES_PER_ELEMENT;
  let a_position = gl.getAttribLocation(gl.program, 'a_position');
  if (a_position < 0) {
    console.log('Failed to get the storage location of a_position');
    return -1;
  }
  gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  gl.enableVertexAttribArray(a_position); 

  let a_color = gl.getAttribLocation(gl.program, 'a_color');
  if (a_color < 0) {
    console.log('Failed to get the storage location of a_color');
    return -1;
  }
  gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  gl.enableVertexAttribArray(a_color); 
  gl.bindBuffer(gl.ARRAY_BUFFER,null)
  return n;
}

</script>

</body>
</html>